<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>支出记账</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='date-style.css') }}" />
</head>

<body>
    <!-- 统计信息 -->
    <div class="stats-container">
        <div class="stats-item">
            <div class="stats-half">
                <p class="stats-title">当月支出</p>
                <p class="stats-amount expense" id="totalExpense">0</p>
            </div>
            <div class="divider"></div>
            <div class="stats-half">
                <p class="stats-title">剩余收入</p>
                <p class="stats-amount budget" id="remainingBudget">0</p>
            </div>
        </div>
    </div>
    {% if expenses %}
    <div class="expenses-grid">
        {% for expense in expenses %}
        <div class="expense-card">
            <div>
                <span class="expense-date">日期：{{ expense.date }}</span>
                 <span class=" del-mini-div">
                    <form method="POST"
                        action="/expenses/delete/{{ expense.id }}"
                        style="display: inline" onsubmit="return confirm('确定要删除这个支出吗？')">
                        <button type="submit" class="del-mini-btn">
                            删除
                        </button>
                    </form>
                </span>
            </div>
            <div class="expense-description">描述：{{ expense.description }}</div>
            <div class="expense-amount">￥{{ expense.amount }}</div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p>没有找到支出记录。</p>
    {% endif %}

    <h2>添加新支出</h2>
    <form method="POST" action="/expenses">
        <div class="form-row">
            <div class="form-group">
                <label>日期:</label>
                <input type="date" name="date" required value="{{ today }}" />
            </div>
            <div class="form-group">
                <label>金额:</label>
                <input type="number" step="0.01" name="amount" required />
            </div>
        </div>
        <div class="form-group">
            <label>描述:</label>
            <input type="text" name="description" />
        </div>
        <button type="submit" class="btn">添加支出</button>
    </form>

    <!-- 导航按钮 -->
    <div class="floating-btn">
        <button onclick="toggleMenu()" aria-label="菜单按钮">☰</button>
        <ul class="menu" id="navMenu">
            <li><a href="/expenses" class="btn">查看支出</a></li>
            <li><a href="/budget" class="btn">查看预算</a></li>
            <li><a href="/scheduled_events/add" class="btn">添加事件</a></li>
            <li><a href="/scheduled_events" class="btn">管理事件</a></li>
            <li><a href="/backup-db" class="btn">备份数据</a></li>
            <li><a href="/import-db" class="btn">导入数据</a></li>
            <li>
                <a href="/reset-db" onclick="return confirm('确定要重置数据库吗？这将删除所有数据并重新创建表')" class="btn"
                    style="background-color: #f44336">重置数据库</a>
            </li>
        </ul>
    </div>

    <script>
        // 获取本月的总支出和预算剩余
        fetch("/expenses/api/monthly-stats")
            .then((response) => response.json())
            .then((data) => {
                // 更新DOM中的统计数据
                document.getElementById("totalExpense").textContent =
                    data.totalExpense;
                document.getElementById("remainingBudget").textContent =
                    data.remainingBudget;
            })
            .catch((error) =>
                console.error("Error fetching monthly stats:", error)
            );

        // 菜单切换函数
        function toggleMenu() {
            let menu = document.getElementById("navMenu");
            if (!menu) return;

            let changeOpen = menu.style.display != "block";

            const items = menu.querySelectorAll("li");
            items.forEach((item, index) => {
                item.style.display = changeOpen ? "block" : "none";
                // 添加延迟以创建动画效果
                item.style.transitionDelay = changeOpen ? `${index * 50}ms` : "0ms";
            });

            // 显示菜单容器（如果被隐藏）
            menu.style.display = changeOpen ? "block" : "none";;
        };
       

        // 点击文档其他地方关闭菜单
        document.addEventListener("click", function (e) {
            const floatingBtnContainer = document.querySelector(".floating-btn");
            if (floatingBtnContainer && !floatingBtnContainer.contains(e.target)) {
                const menu = document.getElementById("navMenu");
                if (menu) {
                    // 使用getComputedStyle获取实际显示状态
                    const displayStyle = window.getComputedStyle(menu).display;
                    if (displayStyle === "block") {
                        toggleMenu();
                    }
                }
            }
        });
    </script>
</body>

</html>